<template>
  <!-- 项目实施 - 11风险监控 - tab1在建项目 -->
  <div class="risk-monitoring-doing">
    <el-row :gutter="20">
      <el-col :span="8" v-for="(i, idx) in cardListData" :key="idx" class="card-group">
        <card-list :cardData="i" :idx="idx" @cardClick="showModal('card1')" ></card-list>
      </el-col>
      <el-col :span="24">
        <el-form class="search" :inline="true" :model="formData" label-position="right" label-width="90px">
          <el-row :gutter="12">
            <el-col :span="16" v-if="showSearch == false">
              <advancedFilter></advancedFilter>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="项目名称">
                <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="风险名称">
                <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="风险状态">
                <el-select v-model="formData.sel1" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="未发生" value="0"></el-option>
                  <el-option label="应对中" value="1"></el-option>
                  <el-option label="不存在" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="风险等级">
                <el-select v-model="formData.sel2" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="一级" value="0"></el-option>
                  <el-option label="二级" value="1"></el-option>
                  <el-option label="三级" value="2"></el-option>
                  <el-option label="四级" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="风险类型">
                <el-select v-model="formData.sel3" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="质量风险" value="0"></el-option>
                  <el-option label="成本风险" value="1"></el-option>
                  <el-option label="人事风险" value="2"></el-option>
                  <el-option label="设计风险" value="3"></el-option>
                  <el-option label="环境风险" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="发生概率">
                <el-select v-model="formData.sel4" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="很低" value="0"></el-option>
                  <el-option label="低" value="1"></el-option>
                  <el-option label="中" value="2"></el-option>
                  <el-option label="高" value="3"></el-option>
                  <el-option label="很高" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="showSearch ? 24 : 8" style="text-align: right;">
              <el-button type="primary">筛选</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-row :gutter="12" style="display: inline-flex;width: 100%;">
          <el-col :span="4" :md="5" class="border-r">
            <el-input v-model="treeSearch" class="tree-search" placeholder="搜索关键字" suffix-icon="el-icon-search"></el-input>
            <el-tree class="cust-tree" node-key="id" :data="treeData" ref="tree" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
          </el-col>
          <el-col :span="20" :md="19">
            <div class="table-top-btns">
              <el-button type="primary" plain @click="showModal('add')"> 风险登记 </el-button>
            </div>
            <cust-act-table
              ref="custActTable"
              tableType="riskMonitoringDoing"
              :list="tableData"
              :colConfigs="customColumns"
              @changePage="changePage"
              @getDetail="showModal('edit')"
              @getSelectedRow="showModal('table')"
              :pageNum="page.pageNum"
              :pageSize="page.pageSize"
              :total="page.total"
              :showIdx="false"
              :showAct="true"
              rKey="index"
            ></cust-act-table>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 点击卡片弹窗 -->
    <el-dialog :title="cardTitle1" class="card-modal" :visible.sync="cardState1" @close="closeModal('card1')" width="1200px" style="margin-top:6vh;" :close-on-click-modal="false">
      <div class="plan-change-btns">
        <el-dropdown trigger="click" style="margin-right:10px;">
          <el-button type="primary" plain>
            全部数据<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>全部数据</el-dropdown-item>
            <el-dropdown-item>
              <span @click="shortcutFilter(true)">
                <i class="el-icon-plus" style="color: #11A983;"></i>添加快捷筛选
              </span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button @click="shortcutFilter(true)" icon="el-icon-files" type="primary" plain> 筛选 </el-button>
        <el-button @click="$message.info('转发')" type="primary" plain> 转发 </el-button>
        <el-button @click="$message.info('导出')" type="primary" plain> 导出 </el-button>
        <el-button @click="$message.info('打印')" type="primary" plain> 打印 </el-button>
        <el-button @click="$message.info('致信交流')" type="primary" plain> 致信交流 </el-button>
        <i class="el-icon-question" @click="helpState = true" title="帮助"></i>
      </div>
      <cust-act-table
        ref="card1"
        tableType="riskMonitoring"
        :list="cardData"
        :colConfigs="cardCol"
        @changePage="changeCardPage1"
        @boxClick="boxClick"
        :pageNum="cardPage1.pageNum"
        :pageSize="cardPage1.pageSize"
        :total="cardPage1.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 点击卡片二级弹窗 -->
    <el-dialog :title="cardTitle2" class="card-modal" :visible.sync="cardState2" @close="closeModal('card2')" width="800px" :close-on-click-modal="false">
      <cust-act-table
        ref="card2"
        tableType=""
        :list="cardData2"
        :colConfigs="cardCol2"
        @changePage="changeCardPage2"
        @getSelectedRow="showModal('card3')"
        :pageNum="cardPage2.pageNum"
        :pageSize="cardPage2.pageSize"
        :total="cardPage2.total"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 添加快捷筛选 -->
    <el-dialog class="shortcut-modal" :visible.sync="shortcutState" @close="shortcutFilter(false)" :width="shortType==0? '800px': '1000px'" show-close :close-on-click-modal="false">
      <div slot="title" class="shortcut-modal-title">
        <span>设置筛选条件</span>
        <div>
          <el-button type="text"> 重置 </el-button>
          <el-button type="text"> 清空 </el-button>
        </div>
      </div>
      <div class="shortcut-modal-body">
        <div class="select-type">
          <span>筛选模式</span>
          <el-radio-group v-model="shortType">
            <el-radio :label="0">普通筛选</el-radio>
            <el-radio :label="1">高级筛选</el-radio>
          </el-radio-group>
        </div>
        <el-form v-if="shortType == 0" :inline="true" :model="shortForm"  class="demo-form-inline">
          <el-form-item v-for="(i, idx) in shortForm.item1" :key="'item1.' + idx" :label="i.title" :prop="'item1.' + idx + '.value'">
            <el-select v-model="i.sel1" multiple clearable placeholder="请选择..." style="width: 220px">
            </el-select>
            <el-select v-model="i.sel2" multiple clearable placeholder="请选择..." style="width: 120px;margin-left:10px;">
            </el-select>
            <el-input v-model="i.ipt1" clearable placeholder="请输入" style="width: 250px;margin-left:10px;"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button v-if="index1 != 0" icon="el-icon-minus" plain class="cust-btn" @click="handleRemove"></el-button>
            <el-button icon="el-icon-plus" plain class="cust-btn" @click="handleAdd"></el-button>
          </el-form-item>
        </el-form>
        <el-form v-if="shortType == 1" :inline="true" :model="shortForm"  class="demo-form-inline">
          <el-form-item v-for="(i, idx) in shortForm.item2" :key="'item2.' + idx" :label="i.title" :prop="'item2.' + idx + '.value'">
            <el-select v-model="i.sel1" multiple clearable placeholder="请选择..." style="width: 100px">
            </el-select>
            <el-select v-model="i.sel2" multiple clearable placeholder="请选择..." style="width: 180px;margin-left:10px;">
            </el-select>
            <el-select v-model="i.sel3" multiple clearable placeholder="请选择..." style="width: 120px;margin-left:10px;">
            </el-select>
            <el-input v-model="i.ipt1" disabled style="width: 180px;margin-left:10px;"></el-input>
            <el-select v-model="i.sel4" multiple clearable placeholder="请选择..." style="width: 100px;margin-left:10px;">
            </el-select>
            <el-select v-model="i.sel5" multiple clearable placeholder="请选择..." style="width: 100px;margin-left:10px;">
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button v-if="index2 != 0" icon="el-icon-minus" plain class="cust-btn" @click="handleRemove"></el-button>
            <el-button icon="el-icon-plus" plain class="cust-btn" @click="handleAdd"></el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="shortcut-modal-footer">
        <div>
          <el-button type="text" @click="saveShortcut"> 另存为 </el-button>
          <el-button type="text" @click="saveShortcut"> 保存 </el-button>
        </div>
        <div>
          <el-button type="primary" plain @click="shortcutFilter(false)"> 取消 </el-button>
          <el-button type="primary" @click="shortcutFilter(false)"> 筛选 </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 帮助弹窗 -->
    <el-dialog title="帮助" class="help-modal" :visible.sync="helpState" @close="helpState=false" width="600px" show-close :close-on-click-modal="false">
      <div>
        <h4>【快捷筛选】</h4>
        <ul>
          <li v-for="(i, idx) in helpText" :key="idx">
            <h4>{{ i.title }}</h4>
            <h5>{{ i.subTitle }}</h5>
            <p>{{ i.text }}</p>
          </li>
        </ul>
      </div>
      <span slot="footer" class="help-modal-footer">
        <el-button type="primary" @click="helpState=false"> 关闭 </el-button>
      </span>
    </el-dialog>
    <!-- 新增、修改、查看 -->
    <el-dialog :title="modalTitle" class="btn-modal" :visible.sync="modalState" @close="closeModal('table')"  width="800px" :close-on-click-modal="false">
      <modalBtns :modalType="modalType == 'card3' ? 'table' : modalType" @close="closeModal('table')"></modalBtns>
      <formName text="风险登记册"></formName>
      <div class="form-content">
        <formPart listTitle="基本信息" ref="info1" :modalTitle="modalType == 'add' || modalType == 'edit' ? 'EDIT-FORM' : '查看'" :formList="formInfo.info1"></formPart>
        <formPart listTitle="风险分析" ref="info2" :modalTitle="modalType == 'add' || modalType == 'edit' ? 'EDIT-FORM' : '查看'" :formList="formInfo.info2"></formPart>
        <formPart v-if="modalType == 'edit' || modalType == 'table'" listTitle="风险更新" ref="info3" :modalTitle="modalType == 'edit' ? 'EDIT-FORM' : '查看'" :formList="formInfo.info3"></formPart>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { tableData11, customColumns11, menu11_cardTableData, menu11_cardTableCol, helpText, menu11_custCardDetailTableData, menu11_custCardDetailTableCol } from '../../js/staticData';
import cardList from '../../components/cardList';
import modalBtns from '../../components/modalBtns';
import formName from '../../components/formName';
import formPart from '../../components/formPart';
import advancedFilter from '../../components/advancedFilter';
import custActTable from "../../components/custActTable.vue";
export default {
  name: "riskMonitoringDoing",
  components: {cardList, custActTable, advancedFilter, modalBtns, formName, formPart},
  data() {
    return {
      cardListData: [
        {
          img3: require('../../images/card-icon7.png'),
          line4: '风险总数',
          line3: '5'
        },
        {
          img3: require('../../images/card-icon2.png'),
          line4: '现存风险',
          line3: '5'
        },
        {
          img3: require('../../images/card-icon14.png'),
          line4: '临近风险',
          line3: '5'
        }
      ],
      formData: {
        ipt1: '',
        ipt2: '',
        sel1: [],
        sel2: [],
        sel3: [],
        sel4: []
      },
      treeSearch: '',
      showSearch: true,
      treeData: [
        {
          label: '风险状态',
          children: [
            { label: '未发生', id: 0},
            { label: '应对中', id: 1},
            { label: '不存在', id: 2}
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      contentIdx: 0,
      tableData: tableData11[0],
      customColumns: customColumns11,
      cardData: menu11_cardTableData,
      cardCol: menu11_cardTableCol,
      cardData2: menu11_custCardDetailTableData,
      cardCol2: menu11_custCardDetailTableCol,
      cardTitle1: `项目风险统计-负责项目`,
      cardTitle2: '',
      cardState1: false, // 点击卡片弹窗
      cardState2: false, // 点击卡片内部列表行弹窗
      helpState: false,
      helpText: helpText,
      shortcutState: false,
      shortType: 0,
      shortForm: {
        item1: [
          {
            sel1: '',
            sel2: '',
            ipt1: '',
          }
        ],
        item2: [
          {
            sel1: '',
            sel2: '',
            sel3: '',
            sel4: '',
            sel5: '',
            ipt1: '',
          }
        ]
      },
      index1: 0,
      index2: 0,
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      cardPage1: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      cardPage2: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      modalState: false,
      modalType: '',
      modalTitle: '',
      formInfo: {}
    };
  },
  watch: {
    tableData: {
      handler(n, o) {
        setTimeout(() => {
          document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
        }, 10)
      },
      deep: true
    },
    contentIdx(n) {},
    modalType(n){},
    cardIdx(n){},
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData11[0];
      setTimeout(() => {
        document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
        if(this.cardData && this.cardData.length){
          this.cardPage1.total = this.cardData.length;
          this.cardTitle1 = `项目风险统计-负责项目 (${this.cardPage1.total})条`;
        } else {
          this.cardPage1.total = 0;
          this.cardTitle1 = `项目风险统计-负责项目`;
        }
      }, 1500)
      this.customColumns = customColumns11;
    })
  },
  methods: {
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 点击树形控件
     */
    handleNodeClick(data) {
      this.contentIdx = data.id;
      this.customColumns = customColumns11;
      this.tableData = tableData11[this.contentIdx];
    },
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal(type) {
      this.modalType = type;
      this.modalTitle = type == 'add' ? '新建' : type == 'edit' ? '修改' : type == 'card1' ? '项目风险统计-负责项目' : type == 'card3' ? '穿透显示详情' : '查看';
      if(type == 'card1') {
        this.cardState1 = true;
      } else if(type == 'card2') {
        this.cardState2 = true;
      } else {
        if(type == 'add') {
          this.formInfo = {
            info1: [
              { l: '风险名称', v: '', type: 'input', span: 12 },
              { l: '风险类型', v: '', type: 'select', option: [{l:'质量风险', v: '0'},{l:'成本风险', v: '1'},{l:'人事风险', v: '2'}, {l:'设计风险', v: '3'}, {l:'环境风险', v: '4'}], span: 6 },
              { l: '风险状态', v: '未发生', type: 'select', option: [{l:'未发生', v: '0'},{l:'应对中', v: '1'},{l:'不存在', v: '2'}], span: 6 },
              { l: '负责人', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon4.png'), width: '14px', height: '16px'}, span: 6 },
              { l: '预计发生', v: '', type: 'datePicker', span: 6 },
              { l: '项目名称', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '风险描述', v: '', type: 'input', span: 24 },
            ],
            info2: [
              { l: '发生概率', v: '', type: 'select', option: [{l:'很低', v: '0'},{l:'低', v: '1'},{l:'中', v: '2'},{l:'高', v: '3'},{l:'很高', v: '4'}], span: 6 },
              { l: '影响程度', v: '', type: 'select', option: [{l:'可忽略', v: '0'},{l:'轻微', v: '1'},{l:'严重', v: '2'}, {l:'特别严重', v: '3'}, {l:'灾难性', v: '4'}], span: 6 },
              { l: '风险等级', v: '', type: 'select', option: [{l:'一级', v: '0'},{l:'二级', v: '1'},{l:'三级', v: '2'}, {l:'四级', v: '3'}], span: 6 },
              { l: '应对策略', v: '', type: 'select', option: [{l:'上报', v: '0'},{l:'规避', v: '1'},{l:'转移', v: '2'}, {l:'减轻', v: '3'}, {l:'接受', v: '4'}], span: 6 },
              { l: '应对措施', v: '', type: 'input', span: 24 }
            ]
          }
        } else {
          this.formInfo = {
            info1: [
              { l: '风险名称', v: '客户方项目实施人员离职风险', type: 'input', span: 12 },
              { l: '风险类型', v: '人事风险', type: type == 'add' || type == 'edit' ? 'select' : 'input', option: [{l:'质量风险', v: '0'},{l:'成本风险', v: '1'},{l:'人事风险', v: '2'}, {l:'设计风险', v: '3'}, {l:'环境风险', v: '4'}], span: 6 },
              { l: '风险状态', v: '未发生', type: type == 'add' || type == 'edit' ? 'select' : 'input', option: [{l:'未发生', v: '0'},{l:'应对中', v: '1'},{l:'不存在', v: '2'}], span: 6 },
              { l: '负责人', v: '苑珙', type: type == 'add' ? 'inputIconR' : 'input', icon: { path:require('../../images/modal-icon4.png'), width: '14px', height: '16px'}, span: 6 },
              { l: '预计发生', v: '2024-06-31', type: type == 'add' || type == 'edit' ? 'datePicker' : 'input', span: 6 },
              { l: '项目名称', v: '蓝旗机器人系统升级', type: type == 'add' || type == 'edit' ? 'inputIconR' : 'input', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '风险描述', v: '客户方项目实施人员有离职意向。', type: 'input', span: 24 },
            ],
            info2: [
              { l: '发生概率', v: '高', type: type == 'add' || type == 'edit' ? 'select' : 'input', option: [{l:'很低', v: '0'},{l:'低', v: '1'},{l:'中', v: '2'},{l:'高', v: '3'},{l:'很高', v: '4'}], span: 6 },
              { l: '影响程度', v: '轻微', type: type == 'add' || type == 'edit' ? 'select' : 'input', option: [{l:'可忽略', v: '0'},{l:'轻微', v: '1'},{l:'严重', v: '2'}, {l:'特别严重', v: '3'}, {l:'灾难性', v: '4'}], span: 6 },
              { l: '风险等级', v: '二级', type: type == 'add' || type == 'edit' ? 'select' : 'input', option: [{l:'一级', v: '0'},{l:'二级', v: '1'},{l:'三级', v: '2'}, {l:'四级', v: '3'}], span: 6 },
              { l: '应对策略', v: '上报', type: type == 'add' || type == 'edit' ? 'select' : 'input', option: [{l:'上报', v: '0'},{l:'规避', v: '1'},{l:'转移', v: '2'}, {l:'减轻', v: '3'}, {l:'接受', v: '4'}], span: 6 },
              { l: '应对措施', v: '客户方项目实施人员离职，将面对新人何时到位，到位后熟悉项目和培训技能等问题，将导致项目进度落后。针对上述情况，项目组应立即与客户方领导沟通形成应对方案。', type: 'input', span: 24 }
            ],
            info3: [
              { l: '负责人', v: '苑珙', type: type == 'edit' ? 'inputIconR' : 'input', icon: { path:require('../../images/modal-icon4.png'), width: '14px', height: '16px'}, span: 6 },
              { l: '更新日期', v: '', type: type == 'edit' ? 'datePicker' : 'input', span: 6 },
              { l: '更新说明', v: '', type: 'input', span: 24 }
            ]
          }
          if(type == 'edit' || type == 'table') {
            this.formInfo.info1[3] = { l: '登记日期', v: '2024-06-31', type: type == 'edit' ? 'datePicker' : 'input', span: 6 };
          }
        }
        this.modalState = true;
      }
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal(type) {
      if(type == 'card') {
        this.cardState1 = false;
      } else if(type == 'card2') {
        this.cardState2 = false;
      } else {
        this.modalState = false;
      }
    },
    /**
     * @author Wrl
     * 新增筛选条件
     */
    handleAdd(e) {
      if(this.shortType == 0) {
        this.index1++;
        this.shortForm.item1.push({
          sel1: '',
          sel2: '',
          ipt1: '',
        });
      } else if(this.shortType == 1) {
        this.index2++;
        this.shortForm.item2.push({
          sel1: '',
          sel2: '',
          sel3: '',
          sel4: '',
          sel5: '',
          ipt1: '',
        });
      }
    },
    /**
     * @author Wrl
     * 删除筛选条件
     */
    handleRemove(e) {
      if(this.shortType == 0) {
        if(this.index1 != 0) {
          this.shortForm.item1.splice(this.index1, 1);
          this.index1--
        }
      } else if(this.shortType == 1) {
        if(this.index2 != 0) {
          this.shortForm.item2.splice(this.index2, 1);
          this.index2--
        }
      }
    },
    /**
     * @author Wrl
     * 设置筛选条件 - 保存
     */
    saveShortcut() {
      this.$message.success('保存成功！');
      this.shortcutState = false;
    },
    /**
     * @author Wrl
     * 设置筛选条件弹窗
     */
    shortcutFilter(e) {
      this.shortcutState = e;
      if(e == false) {
        this.shortType = 0;
        this.shortForm = {
          item1: [
            {
              sel1: '',
              sel2: '',
              ipt1: '',
            }
          ],
          item2: [
            {
              sel1: '',
              sel2: '',
              sel3: '',
              sel4: '',
              sel5: '',
              ipt1: '',
            }
          ]
        }
      }
    },
    /**
     * @author Wrl
     * 点击卡片弹窗列表行 - 二级弹窗
     */
    boxClick(obj) {
      this.cardData2 = [];
      this.$nextTick(() => {
        this.cardTitle2 = `${obj.a}${obj.b}(计数):${obj.c}`;
        let arr = [];
        for(let i=0; i<obj.c; i++) {
          let temp = {
            xmmc: obj.a,
            xcfx: `test${i+1}客户方项目实施人员离职风险`
          }
          arr.push(temp);
        }
        this.cardData2 = arr;
        this.showModal('card2')
      })
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 获取卡片列表分页信息
     */
    changeCardPage1(page) {
			this.cardPage1.pageNum = page.pageNum; // 当前页
			this.cardPage1.pageSize = page.pageSize; // 每页条数
			this.cardPage1.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 获取卡片二级列表分页信息
     */
    changeCardPage2(page) {
			this.cardPage2.pageNum = page.pageNum; // 当前页
			this.cardPage2.pageSize = page.pageSize; // 每页条数
			this.cardPage2.total = page.total; // 总数
		}
  }
};
</script>

<style lang="scss" scoped>
  .risk-monitoring-doing {
    .card-group,
    .table-top-btns {
      margin-bottom: 16px;
    }
    .card-modal {
      overflow: hidden;
      max-height: 750px;
      .el-dialog__body {
        padding: 10px 20px;
      }
      .plan-change-btns {
        position: absolute;
        top: 10px;
        right: 50px;
        width: 900px;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        .el-icon-question {
          color:#11A983;
          margin-left:10px;
          cursor: pointer;
        }
      }
    }
    .tree-search {
      width: 200px;
      ::v-deep .el-input__inner {
        border-radius: 20px;
      }
    }
    .cust-tree {
      margin-top: 16px;
    }
    .bottom-card {
      min-height: 100px;
    }
    ::v-deep {
      .search {
        .el-form-item {
          width: 100%;
        }
        .el-form-item__content {
          width: calc(100% - 90px);
        }
      }
      .cust-modal .cust-modal-bgi {
        margin-top: 20px;
      }
      .el-dialog__headerbtn {
        z-index: 100;
      }
      .btn-modal {
        .el-dialog__header {
          padding: 20px 20px 10px;
        }
        .el-dialog__body {
          padding: 0 20px 20px;
        }
      }
      .help-modal {
        .el-dialog__header {
          padding: 20px;
        }
        .el-dialog__body {
          padding: 0 20px;
          div {
            height: 75vh;
            overflow-y: scroll;
            padding-bottom: 20px;
            box-sizing: content-box;
            ul {
              padding: 0;
              li {
                list-style: none;
                h4 {
                  margin: 20px 0 5px;
                }
                h5 {
                  color:#333333;
                  font-weight: bold;
                  font-family: Arial, "微软雅黑", "Helvetica Neue", "Microsoft Yahei", 宋体, Helvetica, STheiti, Tahoma, sans-serif, serif;
                  font-size: 14px;
                  margin: 5px auto;
                  text-indent: 1.5em;
                }
                p {
                  margin-top: 0;
                  text-indent: 2em;
                }
              }
            }
            &::-webkit-scrollbar {
              width: 0;
            }
          }
        }
      }
      .shortcut-modal {
        .el-dialog__header {
          padding: 10px 20px;
        }
        .el-dialog__body {
          padding: 0 20px;
        }
        .shortcut-modal-title {
          display: inline-flex;
          justify-content: space-between;
          align-items: center;
          width: 95%;
        }
        .shortcut-modal-body {
          .select-type {
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 15px;
            .el-radio-group {
              margin-left: 10px;
            }
          }
          .cust-btn {
            padding: 2px 3px;
            font-size: 10px;
          }
        }
        .shortcut-modal-footer {
          display: inline-flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
        }
      }
    }
    .border-r {
      min-width: 220px;
      border-right: 1px solid #cccccc;
    }
  }
</style>